<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./WEB-INF/templates/newMainTemplateWithFooter.xhtml">
    <ui:define name="metaTitle">
        <title>#{indexCompanyMessages.MetaTitle}</title>
    </ui:define>
    <ui:define name="metaDescription">
        <meta name="Description" content="#{indexCompanyMessages.MetaDescription}"></meta>
    </ui:define>
    <ui:define name="metaKeywords">
        <meta name="Keywords" content="#{messages.MetaKeyword1},#{messages.MetaKeyword2},#{messages.MetaKeyword3},#{messages.MetaKeyword4},#{messages.MetaKeyword6},#{indexCompanyMessages.MetaKeyword1},#{indexCompanyMessages.MetaKeyword2},#{indexCompanyMessages.MetaKeyword3}#{indexCompanyMessages.MetaKeyword4},#{indexCompanyMessages.MetaKeyword5},#{indexCompanyMessages.MetaKeyword6},#{indexCompanyMessages.MetaKeyword7},#{indexCompanyMessages.MetaKeyword8},#{indexCompanyMessages.MetaKeyword9}"></meta>
    </ui:define>
    <ui:define name="bar">
        <h:outputStylesheet library="css" name="bar/bar.css"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bar/bar_desktop.css" media="screen and (min-width:1025px) and (max-width:1600px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bar/bar_desktop_wide.css" media="screen and (min-width : 1601px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bar/bar_tablet.css" media="screen and (min-device-width : 768px) and (max-device-width : 1024px), screen and (max-width:1024px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="bar/bar_smartphone.css" media="screen and (min-device-width : 320px) and (max-device-width : 767px), screen and (max-width:767px)"></h:outputStylesheet>
        <div id="bar" class="homeBar fixed">
        <p:commandLink process="@this" styleClass=" logo" action="#{loginBean.goIndex()}">
            <h:graphicImage alt="#{indexMessages.LogoAlt}" library="images" style="width:100%" name="logo.png"></h:graphicImage>
        </p:commandLink>
        <span class="ui-button-text menuButton floatRight displayNone smartphone bodyFont inlineBlock">#{indexMessages.Menu}</span>
        <div id="navBar" class="overflowHidden height0 textAlignRight">
        <ul class="barMenu">
            <li class="barMenuItem bodyFont textAlignRight">
                <p:commandLink process="@this" update=":suggestionsForm:suggestionsDialog" styleClass="noSmartphone ui-button-text" oncomplete="PF('suggestionsDialog').show();" value="#{messages.Contact}"></p:commandLink>
                <p:commandLink process="@this" styleClass="ui-button-text displayNone smartphone" action="/views/smartphone/Suggestions?faces-redirect=true" value="#{messages.Contact}"></p:commandLink>
            </li>
            <li class="barMenuItem bodyFont noSmartphone noTablet textAlignRight">
                <a class="ui-button-text" href="#companySteps">#{indexMessages.Steps}</a>
            </li>
            <li class="barMenuItem bodyFont noSmartphone noTablet textAlignRight">
                <a class="ui-button-text" href="#grid">#{indexMessages.Ideas}</a>
            </li>
            <li class="barMenuItem bodyFont textAlignRight">
                <p:commandLink process="@this" styleClass="noSmartphone ui-button-text" onclick="PF('loginDialog').show();" value="#{indexMessages.Login}"></p:commandLink>
                <p:commandLink process="@this" styleClass="ui-button-text displayNone smartphone" action="/views/smartphone/Login?faces-redirect=true" value="#{indexMessages.Login}"></p:commandLink>
            </li>
            <li class="barMenuItem textAlignRight">
                <p:commandLink process="@this" styleClass="noSmartphone ui-button-text" onclick="PF('registerDialog').show();" update=":registerForm:registerFormPannel" value="#{indexMessages.Register}"></p:commandLink>
                <p:commandLink process="@this" styleClass="ui-button-text displayNone smartphone" action="/views/smartphone/RegisterCompany?faces-redirect=true" value="#{indexMessages.Register}"></p:commandLink>
            </li>
             <li class="barMenuItem bodyFont textAlignRight">
                 <p:commandLink process="@this" styleClass="ui-button-text" action="/index?faces-redirect=true" value="#{indexCompanyMessages.Candidates}"></p:commandLink>
            </li>
        </ul>
       </div>
    </div>
    </ui:define>
 
    <ui:define name="newContent">
        <h:outputStylesheet library="css" name="index/index.css"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="index/index_desktop.css" media="screen and (min-width:1025px) and (max-width:1600px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="index/index_desktop_wide.css" media="screen and (min-width : 1601px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="index/index_tablet.css" media="screen and (min-device-width : 768px) and (max-device-width : 1024px), screen and (max-width:1024px)"></h:outputStylesheet>
        <h:outputStylesheet library="css" name="index/index_smartphone.css" media="screen and (min-device-width : 320px) and (max-device-width : 767px), screen and (max-width:767px)"></h:outputStylesheet>
        
        <h:form id="loginForm">
            <p:remoteCommand name="redirect" action="#{loginBean.redirectIndex()}" process="@this" autoRun="true"></p:remoteCommand>
            <p:growl  id="growl" showDetail="false" autoUpdate="true" life="3000" />
            <p:dialog draggable="false" resizable="false" header="#{indexMessages.Login}" position="top" modal="true" widgetVar="loginDialog" id="loginDialog">
                <p:inputText styleClass="loginEmail" id="loginEmail" value="#{loginBean.email}" required="true" requiredMessage="#{messages.EmailRequired}" label="#{messages.Email}">  
                    <f:validator  binding="#{loginEmailValidator}"></f:validator>
                    <p:ajax event="change" update="growl" />
                </p:inputText> 
                <p:watermark for="loginEmail" value="#{messages.Email}" /> 
                <p:password style="margin-bottom: 1em!important" styleClass="loginPassword" id="loginPassword" value="#{loginBean.password}" required="true" requiredMessage="#{messages.PasswordRequired}" label="#{messages.Password}">
                    <f:validateLength minimum="5" maximum="30"></f:validateLength>
                    <p:watermark for="loginPassword" value="#{messages.Password}" />
                </p:password>
                <p:commandButton style="margin-bottom: 1em;margin-left: 0.3em;" styleClass="landingButton loginLandingButton grayBackgroundStrong" process="@parent" value="#{messages.LogIn}" update=":loginForm:growl" id="ajax" action="#{loginBean.logIn}" />
                <p:commandLink process="@this" oncomplete="PF('loginDialog').hide();PF('passwordRecoveryDialog').show();" actionListener="#{recoveryPasswordBean.reinitEmail()}" styleClass="forgot" value="#{messages.ForgotPassword}"></p:commandLink>
            </p:dialog>
            <div id="videoContainer" class="sectionContainer" data-property="{videoURL:'http://www.youtube.com/watch?v=_VQS2bVCsOE',quality:'large',containment:'#videoContainer',showYTLogo:false,showControls:false,startAt:0,mute:true,autoPlay:true,loop:true,opacity:1}">
                <h:graphicImage alt="#{indexMessages.FondoAlt}" library="images" name="fondo_color.jpg" styleClass="width100 noDesktopImage displayNone smartphone tablet"></h:graphicImage>
            </div>
            <div id="landing" class="landingDiv sectionContainer">
                <div>
                    <div class="landingTextDiv">
                        <h1 class="companySlogan upperCase titleFont">#{indexCompanyMessages.HomeTitle}</h1>
                        <h:outputText styleClass="landingText contentText noSmartphone bodyFont paragraph" value="#{indexCompanyMessages.HomeDescription}"></h:outputText>
                        <h:outputText styleClass="displayNone smartphone landingText contentText bodyFont paragraph" value="#{indexCompanyMessages.HomeDescriptionSmartphone}"></h:outputText>
                        <h:outputText styleClass="landingText contentText bodyFont block" value="#{indexCompanyMessages.TheRecruiteryCompanySlogan}"></h:outputText>
                    </div>
                    <div class="landingButtonDiv">
                        <p:commandButton styleClass="landingButton loginLandingButton grayBackgroundStrong noSmartphone" process="@this" onclick="PF('loginDialog').show()" value="#{indexMessages.Login}"></p:commandButton>
                        <p:commandButton styleClass="landingButton loginLandingButton grayBackgroundStrong displayNone smartphone inlineBlock" process="@this" action="/views/smartphone/Login?faces-redirect=true" value="#{indexMessages.Login}"></p:commandButton>
                        <p:commandButton styleClass='landingButton redBackgroundStrong registerLandingButton noSmartphone' process="@this" onclick="PF('registerDialog').show()" update=":registerForm:registerFormPannel" value="#{indexMessages.Register}"></p:commandButton>
                        <p:commandButton styleClass='landingButton redBackgroundStrong registerLandingButton displayNone smartphone inlineBlock' process="@this" action="/views/smartphone/RegisterCompany?faces-redirect=true" value="#{indexMessages.Register}"></p:commandButton>
                    </div>
                </div>
            </div>
            
            <div id="companySteps" class="companySteps sectionContainer" >
                <div class="step" id="step1">
                    <div class="stepFigureDiv leftFigure">
                        <h:graphicImage alt="#{indexCompanyMessages.Step1Alt}" styleClass="stepFigure leftFigure noSmartphone" library="images" name="ilus4_alta.png"></h:graphicImage>
                        <h:graphicImage alt="#{indexCompanyMessages.Step1Alt}" styleClass="stepFigure leftFigure displayNone smartphone" library="images" name="ilus4_sinflecha_alta.png"></h:graphicImage>
                    </div>
                    <div class="stepTextDiv">
                        <h2 class="stepTextTitle noSmartphone titleText upperCase titleFont colorWhite">#{indexCompanyMessages.Step1Title}</h2>
                        <h2 class="displayNone stepTextTitle smartphone titleText upperCase titleFont colorWhite">#{indexCompanyMessages.Step1TitleSmartphone}</h2>
                        <h:outputText styleClass="stepTextBody noSmartphone contentText bodyFont colorWhite" value="#{indexCompanyMessages.Step1Description}"></h:outputText>
                        <h:outputText styleClass="displayNone smartphone stepTextBody contentText bodyFont colorWhite" value="#{indexCompanyMessages.Step1DescriptionSmartphone}"></h:outputText>
                    </div>
                    <div class="stepFigureDiv rightFigure noSmartphone">
                        <h:graphicImage alt="#{indexCompanyMessages.Step1Alt}" styleClass="stepFigure" library="images" name="flecha_derecha.png"></h:graphicImage>
                    </div>
                </div>
                <div class="step" id="step2">
                    <div class="stepFigureDiv leftFigure noSmartphone">
                        <h:graphicImage alt="#{indexCompanyMessages.Step2Alt}" styleClass="stepFigure" library="images" name="flecha_izquierda.png"></h:graphicImage>
                    </div>
                    <div class="stepTextDiv">
                        <h2 class="stepTextTitle upperCase noSmartphone titleFont titleText colorWhite">#{indexCompanyMessages.Step2Title}</h2>
                        <h2 class="displayNone stepTextTitle upperCase smartphone titleFont titleText colorWhite">#{indexCompanyMessages.Step2TitleSmartphone}</h2>
                        <h:outputText styleClass="stepTextBody contentText bodyFont colorWhite noSmartphone" value="#{indexCompanyMessages.Step2Description}"></h:outputText>
                        <h:outputText styleClass="displayNone smartphone stepTextBody contentText bodyFont colorWhite" value="#{indexCompanyMessages.Step2DescriptionSmartphone}"></h:outputText>
                    </div>
                    <div class="stepFigureDiv rightFigure">
                        <h:graphicImage alt="#{indexCompanyMessages.Step2Alt}" styleClass="stepFigure noSmartphone" library="images" name="ilus5_alta.png"></h:graphicImage>
                        <h:graphicImage alt="#{indexCompanyMessages.Step2Alt}" styleClass="stepFigure leftFigure displayNone smartphone" library="images" name="ilus5_sinflecha_alta.png"></h:graphicImage>
                    </div>
                </div>
                <div class="step" id="step3">
                    <div class="stepFigureDiv leftFigure">
                        <h:graphicImage alt="#{indexCompanyMessages.Step3Alt}" styleClass="stepFigure noSmartphone" library="images" name="ilus6_alta.png"></h:graphicImage>
                        <h:graphicImage alt="#{indexCompanyMessages.Step3Alt}" styleClass="stepFigure leftFigure displayNone smartphone" library="images" name="ilus6_sinflecha_alta.png"></h:graphicImage>
                    </div>
                    <div class="stepTextDiv">
                        <h2 class="stepTextTitle upperCase titleText titleFont colorWhite">#{indexCompanyMessages.Step3Title}</h2>
                        <h:outputText styleClass="stepTextBody contentText bodyFont colorWhite noSmartphone" value="#{indexCompanyMessages.Step3Description}"></h:outputText>
                        <h:outputText styleClass="displayNone smartphone stepTextBody contentText bodyFont colorWhite" value="#{indexCompanyMessages.Step3DescriptionSmartphone}"></h:outputText>
                    </div>
                    <div class="stepFigureDiv rightFigure noSmartphone">
                        <h:graphicImage alt="#{indexCompanyMessages.Step3Alt}" styleClass="stepFigure" library="images" name="flecha_derecha.png"></h:graphicImage>
                    </div>
                </div>
            </div>
            <div id="grid" class="grid sectionContainer">
                <div class="stepGrid">
                    <div class="gridFigureDiv leftFigure floatLeft">
                        <h:graphicImage alt="#{indexCompanyMessages.Grid1Alt}" styleClass="stepFigure leftFigure blackwhiteGridPicture" library="images" name="juanjo-bote-director-de-english-connection.jpg"></h:graphicImage>
                    </div>
                    <div class="gridTextDiv gridTextDivLeft">
                        <h2 class="stepTextTitle upperCase titleText titleFont colorGrey">#{indexCompanyMessages.Grid1Title}</h2>
                        <h:outputText styleClass="stepTextBody noSmartphone contentText bodyFont" value="#{indexCompanyMessages.Grid1Description}"></h:outputText>
                        <h:outputText styleClass="stepTextBody displayNone smartphone contentText bodyFont" value="#{indexCompanyMessages.Grid1DescriptionSmartphone}"></h:outputText>
                        <h:outputText styleClass="stepTextFooter bodyFont" value="#{indexCompanyMessages.Grid1Footer}"></h:outputText>
                    </div> 
                </div>

                <div class="stepGrid">
                    <div class="gridTextDiv floatRight noMarginRight gridTextDivRight">
                        <h2 class="stepTextTitle upperCase titleText titleFont colorGrey">#{indexCompanyMessages.Grid2Title}</h2>
                        <h:outputText styleClass="stepTextBody contentText bodyFont" value="#{indexCompanyMessages.Grid2Description}"></h:outputText>
                        <h:outputText styleClass="stepTextFooter bodyFont" value="#{indexCompanyMessages.Grid2Footer}"></h:outputText>
                    </div>
                    <div class="gridFigureDiv leftFigure floatRight">
                        <h:graphicImage alt="#{indexCompanyMessages.Grid2Alt}" styleClass="stepFigure leftFigure blackwhiteGridPicture" library="images" name="juan-delgado-opticas-centrovision.jpg"></h:graphicImage>
                    </div>
                </div>
                <div class="stepGrid noSmartphone littleStep1">
                    <div class="leftFigure block width100">
                        <h:graphicImage alt="#{indexCompanyMessages.Grid3Alt}" styleClass="stepFigure leftFigure blackwhiteGridPicture" library="images" name="colour-nude.jpg"></h:graphicImage>
                    </div>
                    <div class="gridTextDiv noMarginLeft">
                        <h2 class="stepTextTitle upperCase noSmartphone titleText titleFont colorGrey">#{indexCompanyMessages.Grid3Title}</h2>
                        <h:outputText styleClass="stepTextBody contentText bodyFont" value="#{indexCompanyMessages.Grid3Description}"></h:outputText>
                        <h:outputText styleClass="stepTextFooter bodyFont" value="#{indexCompanyMessages.Grid3Footer}"></h:outputText>
                    </div>
                </div>
                <div class="gridTextDiv fullTextDiv ">
                    <h2 class="stepTextTitle upperCase titleText titleFont colorWhite">#{indexMessages.Grid4Title}</h2>
                    <h:outputText styleClass="stepTextBody contentText bodyFont colorWhite" value="#{indexMessages.Grid4Description}"></h:outputText>
                    <h:outputText styleClass="stepTextBody contentText bodyFont colorWhite" value="#{indexCompanyMessages.Grid4Description2}"></h:outputText>
                    <p:commandButton style="border:solid 1px;" styleClass='landingButton redBackgroundStrong registerLandingButton floatLeft noSmartphone' process="@this" onclick="PF('registerDialog').show()" update=":registerForm:registerFormPannel" value="#{indexCompanyMessages.Grid4Button}"></p:commandButton>
                    <p:commandButton style="border:solid 1px;" styleClass='landingButton redBackgroundStrong registerLandingButton floatLeft displayNone smartphone' process="@this" action="/views/smartphone/RegisterCompany?faces-redirect=true" value="#{indexCompanyMessages.Grid4Button}"></p:commandButton>
                </div>
                <div class="stepGrid littleStep2 noSmartphone noMarginRight">
                    <div class="leftFigure block width100">
                        <h:graphicImage alt="#{indexCompanyMessages.Grid4Alt}" styleClass="stepFigure leftFigure blackwhiteGridPicture" library="images" name="pablo-lopez-director-y-cofundador-de-silbon.jpg"></h:graphicImage>
                    </div>
                    <div class="gridTextDiv noMarginLeft">
                        <h2 class="stepTextTitle upperCase noSmartphone titleText titleFont colorGrey">#{indexCompanyMessages.Grid5Title}</h2>
                        <h:outputText styleClass="stepTextBody contentText bodyFont" value="#{indexCompanyMessages.Grid5Description}"></h:outputText>
                        <h:outputText styleClass="stepTextFooter bodyFont" value="#{indexCompanyMessages.Grid5Footer}"></h:outputText>
                    </div>
                </div>
            </div>
        </h:form>
                        
                
        <h:form id="registerForm">
            <p:dialog draggable="false" resizable="false" header="#{indexMessages.Register}" modal="true" widgetVar="registerDialog" position="top" id="registerDialog">
                <p:panel id="registerFormPannel" styleClass="noBorder noPadding noBorder">
                    <p:inputText styleClass="loginInput" id="email" value="#{createCompanyBean.companyEmail}" required="true" requiredMessage="#{messages.EmailRequired}" label="#{messages.Email}">  
                        <f:validator  binding="#{emailValidator}"></f:validator>
                        <p:ajax event="change" update=":loginForm:growl" />
                    </p:inputText>  
                    <p:watermark for="email" value="#{messages.Email}" /> 

                    <p:inputText id="companyContact" styleClass="loginInput" value="#{createCompanyBean.companyContact}">
                        <p:ajax event="change" update=":loginForm:growl" />
                    </p:inputText>
                    <p:watermark for="companyContact" value="#{messages.CompanyContact}" /> 

                    <p:inputText id="companyName" styleClass="loginInput" value="#{createCompanyBean.companyName}">
                        <p:ajax event="change" update=":loginForm:growl" />
                    </p:inputText>
                    <p:watermark for="companyName" value="#{messages.CompanyName}" /> 

                    <p:inputText id="companyCif" styleClass="loginInput" value="#{createCompanyBean.companyCif}">
                        <p:ajax event="change" update=":loginForm:growl" />
                    </p:inputText>
                    <p:watermark for="companyCif" value="#{messages.CompanyCif}" /> 
                    <div class="floatRight contractDiv">
                        <h:outputText styleClass="contractMessage" value="#{messages.ContractAccept} "></h:outputText>
                        <p:commandLink styleClass="contractMessage contractLink" value="#{messages.UseTerms} " process="@this" action="/views/recruit/UseTerms?faces-redirect=true"></p:commandLink>
                        <h:outputText styleClass="contractMessage" value="#{messages.And} "></h:outputText>
                        <p:commandLink styleClass="contractMessage contractLink" value="#{messages.PrivacyPolicy}" process="@this" action="/views/recruit/Privacy?faces-redirect=true"></p:commandLink>
                    </div>    
                    <p:commandButton process="@form" style="margin-bottom: 1em;margin-left: 0.3em;" styleClass="landingButton loginLandingButton redBackgroundStrong" value="#{indexMessages.Register}" update=":loginForm:growl" actionListener="#{createCompanyBean.sendCompanyData()}"  />  
                </p:panel>
            </p:dialog>
            <p:dialog draggable="false" resizable="false" header="#{indexMessages.Register}" modal="true" widgetVar="registerDialogOK" position="top" id="registerDialogOK">
                <div>
                    <h:outputText styleClass="block" value="#{indexCompanyMessages.CompanyDataSend}"></h:outputText>
                </div>
                <p:commandButton styleClass='marginTop20 block landingButton redBackgroundStrong registerLandingButton' process="@this" onclick="PF('registerDialogOK').hide();" value="Aceptar"></p:commandButton>
            </p:dialog>
        </h:form>
            
        <h:form id="recoveryForm">
            <p:dialog draggable="false" resizable="false" id="passwordRecoveryDialog" position="top" widgetVar="passwordRecoveryDialog" header="#{messages.ForgotPassword}" modal="true">
                <p:panelGrid styleClass="noBorder noPadding noMargin" columns="1">
                    <p:inputText id="recoveryEmail" value="#{recoveryPasswordBean.email}">
                        <f:validator  binding="#{loginEmailValidator}"></f:validator>
                        <p:ajax event="change" update=":loginForm:growl" />
                    </p:inputText>
                    <p:watermark for="recoveryEmail" value="#{messages.Email}" />
                    <p:captcha label="Captcha" theme="white"></p:captcha>
                    <p:commandButton styleClass="grayBackgroundStrong" update=":loginForm:growl" value="#{messages.Recover}" actionListener="#{recoveryPasswordBean.createRecovery()}"></p:commandButton>
                </p:panelGrid>
            </p:dialog>
        </h:form>
        <h:outputScript library="javascript" name="jquery.mb.YTPlayer.js"></h:outputScript>
        <h:outputScript library="javascript" name="index_1.js"></h:outputScript>
        <h:outputScript library="javascript" name="bar.js"></h:outputScript>
    </ui:define>

</ui:composition>
</html>